<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>英美学府</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="css/login.css"/>
</head>

<body>
<div id="wrap">
    <h3 class="title">信息完善</h3>
    <form class="content">
        <input class="phone" type="" name=""  value="" v-model="phoneNum" placeholder="请输入手机号"/><br/>
        <input class="code" type="" name=""  value="" v-model="codeNum" placeholder="请输入验证码"/><br/>
        <input class="sure" type="button" name="" @click="bindPhoneFun" value="确定"/>
        <p class="have_code" v-show="haveCode" @click="havecodefun">获取验证码</p>
        <p class="have_code" v-show="timeCode"><span>{{seconds}}</span>S</p>
        <p class="have_code" v-show="againCode" @click="havecodefun">重新发送</p>
    </form>
    <h6 class="sign">手机号是购买课程的唯一依据，请完善提交</h6>
</div>
</body>

</html>
<script src="js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/basis.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-resource.js"></script>
<script src="js/jweixin-1.2.0.js" charset="utf-8"></script>
<script src="js/weixinShare.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    window.onload = function () {
//        var URL = 'http://192.168.15.42:8821';
        var vm = new Vue({
            el: '#wrap',
            data: {
                phoneNum: '',
                codeNum: '',
                timeCode: false,
                againCode: false,
                haveCode: true,
                seconds: 60,
            },
            methods: {
                havecodefun: function () {
                    var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
                    if (myreg.test(this.phoneNum)) {
                        this.timeoutfun();
                        this.$http.post(URL+'/tpo/phone/sendCode', {
                            "area": "86",
                            "phone": this.phoneNum,
                        }).then(function (res) {
                            console.log(res.data.status);
                            console.log(res);
                            if (res.data.status == 400) {
                                alert(res.data.message);
                            }
                            if (res.data.status == 500) {
                                alert(res.data.message);
                            }
                        }, function (res) {
                            console.log('失败');
                            console.log(res.status);
                            console.log(res);
                        })
                    }
                },
                timeoutfun: function () {
                    this.timeCode = true;
                    this.haveCode = false;
                    this.againCode = false;
                    console.log(vm.$data.seconds)
                    var setTime = setInterval(function () {
                        vm.$data.seconds--;
                        console.log(vm.$data.seconds)
                        if (vm.$data.seconds <= 0) {
                            clearInterval(setTime);
                            vm.$data.againCode = true;
                            vm.$data.timeCode = false;
                            vm.$data.seconds = 60;
                        }
                    }, 1000);
                },
                bindPhoneFun: function () {
                    if (this.codeNum !== '') {
                        this.$http.post( URL+'/tpo/phone/bind', {
                            "area": "86",
                            "phone": this.phoneNum,
                            "code": this.codeNum,
                        }).then(function (res) {
                            console.log(res.status);
                            if (res.data.status == 200) {
                                window.location.href = 'home.html';
                            }
                            if (res.data.status == 400) {
                                alert(res.data.message);
                            }
                            if (res.data.status == 500) {
                                alert(res.data.message);
                            }
                            console.log(res);
                        }, function (res) {
                            console.log('失败');
                            console.log(res.status);
                            console.log(res);
                        })

                    }
                }
            },


        })
    }
</script>